import {AfterViewInit, Component, OnInit} from '@angular/core';
import {DataService} from '../data.service';
import {NzNotificationService} from 'ng-zorro-antd';

declare const $: any;
@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit, AfterViewInit {

  _allChecked = false; // 是否全选
  _checkedNumber = 0; // 选中数量
  _displayData: Array<any> = [];  // 当前分页内容
  _indeterminate = false;

  checked_pro = []; // 选中的对象数组

  pro_list = [];

  new_project = {
    id: '',
    name: '',
    version: '1.00',
    content: '',
    c_time: 0,
    m_time: 0,
  };

  modifying = {
    id: '',
    name: '',
    version: '1.00',
    content: '',
    c_time: 0,
    m_time: 0,
    delete_arr: [],
  };

  is_new = false;
  is_modify = false;

  new_project_url = 'http://localhost/backend/add_project.php';
  change_project_url = 'http://localhost/backend/change_project.php';
  delete_project_url = 'http://localhost/backend/delete_project.php';
  import_project_url = 'http://localhost/backend/import_project.php';
  export_project_url = 'http://localhost/backend/export_project.php';
  // add_file_pro_url = 'http://localhost/backend/add_file_pro.php';


  constructor(private data: DataService, private _notification: NzNotificationService) { }

  ngOnInit() {
    this.pro_list = this.data.get_project_list();
  }

  ngAfterViewInit() {
    // $('.ant-upload').width('100%');
    $('.ant-modal').width('50%');
  }

  pass_id() {
    $.cookie('edit_project_id', this.checked_pro[0].id);
    $.cookie('edit_project_name', this.checked_pro[0].name);
    this.data.edit_project_id = this.checked_pro[0].id;
    this.data.edit_project_name = this.checked_pro[0].name;
  }



  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~add~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


  show_new() {
    this.is_new = true;
  }

  add_pro() {
    if (this.new_project.name != '') {
      this.new_project.c_time = Math.floor(new Date().getTime() / 1000) ;
      this.new_project.m_time = Math.floor(new Date().getTime() / 1000) ;
      console.log(this.new_project);
      this.data.post(this.new_project, this.new_project_url);
      this.is_new = false;
      this.new_project = {
        id: '',
        name: '',
        version: '1.00',
        content: '',
        c_time: 0,
        m_time: 0,
      };
    } else {
      alert('项目名不能为空');
    }
    // location.reload();
  }

  cancel_add() {
    this.new_project = {
      id: '',
      name: '',
      version: '1.00',
      content: '',
      c_time: 0,
      m_time: 0,
    };
    this.is_new = false;
  }


  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~delete~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  delete_pro() {
    for (let i = 0; i < this.checked_pro.length; i++) {
     this.modifying.delete_arr.push(this.checked_pro[i].id);
    }
    this.data.post(this.modifying , this.delete_project_url);
    console.log(this.modifying.delete_arr);
    this.modifying.delete_arr = [];
    location.reload();
  }

  cancel_delete() {
    this.modifying.delete_arr = [];
  }

  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~modify~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  show_modify() {
    this.modifying = this.checked_pro[0];
    this.is_modify = true;
  }

  modify_pro() {
    this.modifying.m_time = Math.floor(new Date().getTime() / 1000) ;
    console.log(this.modifying);
    this.data.post(this.modifying , this.change_project_url);
    this.is_modify = false;
  }

  cancel_modify() {
    this.modifying = {
      id: '',
      name: '',
      version: '1.00',
      content: '',
      c_time: 0,
      m_time: 0,
      delete_arr: [],
    };
    this.is_modify = false;
  }



// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~load & save~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  import_project() {
    let up_file = $('#file').get(0).files[0];
    let form_data = new FormData();
    form_data.append('project_file', up_file);
    $.ajax({
      type: 'POST',
      url: this.import_project_url,
      contentType: false,
      processData: false,
      async: false,
      data: form_data,
      error: function () {
        alert('无法读取文件');
      },
      success: (data) => {
        console.log('文件读取成功');
      }
    });
    location.reload();
  }




  export_project() {
    this.data.post({'data': this.pro_list}, this.export_project_url);  // 传的值强行变成键值对
    if (this.data.import_success) {
      this._notification.blank('导出成功', '文件地址:' + '/backend/project');
      this.data.import_success = false;
    }
  }




// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~table~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  _displayDataChange($event) {   // 显示当前分页内容
    this._displayData = $event;
  }

  _refreshStatus() {
    const allChecked = this._displayData.every(value => value.checked === true);
    const allUnChecked = this._displayData.every(value => !value.checked);
    this._allChecked = allChecked;
    this._indeterminate = (!allChecked) && (!allUnChecked);
    // this._disabledButton = !this.init_pro.some(value => value.checked);
    this._checkedNumber = this.pro_list.filter(value => value.checked).length;
    this.checked_pro = this.pro_list.filter(value => value.checked);
    // console.log(this.checked_pro);
    this.data.checked = this.checked_pro[0];
  }

  _checkAll(value) {  // 当前分页全选
    if (value) {
      this._displayData.forEach(data => data.checked = true);
    } else {
      this._displayData.forEach(data => data.checked = false);
    }
    this._refreshStatus();
  }

}

